import React from 'react'
import '../styles/appleItem.scss'
import '../styles/appleBasket.scss'
import { useAppleStore } from '../store/appleStore'
import { observer } from 'mobx-react-lite'

function AppleItem(props) {
  let { apple, eatApple } = props
  return (
    <div className="appleItem">
      <div className="apple">
        <img src={require('../images/apple.png')} alt="" width="60px" height="60px" />
      </div>
      <div className="info">
        <div className="name">红苹果 - {apple.id}号</div>
        <div className="weight">{apple.weight}克</div>
      </div>
      <div className="btn-div">
        <button onClick={() => eatApple(apple.id)}> 吃掉 </button>
      </div>
    </div>
  )
}

function Apple() {
  let { status, apples, eatApple, pickApple, isPicking, buttonText } = useAppleStore()

  function getAppleItem() {
    let data = []
    apples.forEach(apple => {
      if (!apple.isEaten) {
        data.push(<AppleItem eatApple={eatApple} apple={apple} key={apple.id} />)
      }
    })
    if (!data.length) return <div>没有了呀。。。</div>
    return data
  }
  let {
    appleNow: { quantity: notEatenQuantity, weight: notEatenWeight },
    appleEaten: { quantity: EatenQuantity, weight: EatenWeight }
  } = status
  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>

      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">
            {notEatenQuantity}个苹果，{notEatenWeight}克
          </div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">
            {EatenQuantity}个苹果，{EatenWeight}克
          </div>
        </div>
      </div>

      <div className="appleList">{getAppleItem()}</div>

      <div className="btn-div">
        <button className={isPicking ? 'disabled' : ''} onClick={() => pickApple()}>
          {buttonText}
        </button>
      </div>
    </div>
  )
}

export default observer(Apple)
